<template>
  <div class="dashboard">
    <div class="dashboard_main">
      <!-- 头部 -->
      <div class="topcard">
        <el-row :gutter="20">
          <!-- 在线商品数 -->
          <el-col :span="6">
            <el-card :body-style="{ padding: '15px' }">
              <div class="top_main">
                <div class="top_box">
                  <div>在线商品数</div>
                  <p>{{ admininfo.goods.on_line }}</p>
                </div>
                <div class="main_box">
                  <div>
                    周同比:{{ admininfo.goods.beginWeek_num.count }}%
                    <i
                      v-if="admininfo.goods.beginWeek_num.field == 1"
                      class="el-icon-caret-bottom"
                      style="color:red"
                    ></i>
                    <i v-else class="el-icon-caret-top" style="color:green"></i>
                  </div>
                  <div>
                    日同比:{{ admininfo.goods.today_count.count }}%
                    <i
                      v-if="admininfo.goods.today_count.field == 1"
                      class="el-icon-caret-bottom"
                      style="color:red"
                    ></i>
                    <i v-else class="el-icon-caret-top" style="color:green"></i>
                  </div>
                </div>
                <el-divider></el-divider>
                <div class="bot_box">
                  历史总数:{{ admininfo.goods.all_count }}
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- 当前推广商品数 -->
          <el-col :span="6">
            <el-card :body-style="{ padding: '15px' }">
              <div class="top_main">
                <div class="top_box">
                  <div>当前推广商品数</div>
                  <p>{{ admininfo.tg.tg_num }}</p>
                </div>
                <div class="main_box">
                  <div
                    ref="tgchart"
                    class="tgchart"
                    :style="{ width: '100%' }"
                  ></div>
                </div>
                <el-divider></el-divider>
                <div class="bot_box">
                  今日新增:{{ admininfo.tg.today_add_num }}
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- 佣金变动商品总数 -->
          <el-col :span="6">
            <el-card :body-style="{ padding: '15px' }">
              <div class="top_main">
                <div class="top_box">
                  <div>佣金变动商品总数</div>
                  <p>{{ admininfo.yjbd.all_count }}</p>
                </div>
                <div class="main_box">
                  <div ref="yjbdchart" :style="{ width: '100%' }"></div>
                </div>
                <el-divider></el-divider>
                <div class="bot_box">
                  <span
                    >今日变动:{{ admininfo.yjbd.today_commission_num }}</span
                  >
                  <span style="margin-left:10px"
                    >变动率:{{ admininfo.yjbd.dl }}%</span
                  >
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- 总用户数 -->
          <el-col :span="6">
            <el-card :body-style="{ padding: '15px' }">
              <div class="top_main">
                <div class="top_box">
                  <div>总用户数</div>
                  <p>{{ admininfo.tg_user.all_count }}</p>
                </div>
                <div style="height: 60px;">
                  <div class="progress_box">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="20"
                      :percentage="admininfo.tg_user.sh_num"
                    ></el-progress>
                  </div>
                  <!-- <el-progress
                    :percentage="admininfo.tg_user.sh_num"
                  ></el-progress> -->
                </div>
                <el-divider></el-divider>
                <div class="bot_box">
                  今日新增:{{ admininfo.tg_user.today_num }}
                  <!-- <i
                    v-if="admininfo.goods.today_count.field == 1"
                    class="el-icon-caret-bottom"
                    style="color:red"
                  ></i>
                  <i v-else class="el-icon-caret-top" style="color:green"></i> -->
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 中间 -->
      <div class="botcard">
        <el-card class="box_card">
          <!-- <div slot="header" class="clearfix"></div> -->
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            class="tabs_box"
          >
            <div class="tabs_position">
              <div class="tabs_radio">
                <el-radio-group
                  v-model="radio"
                  size="small"
                  @change="radioChange"
                >
                  <el-radio label="1">今日</el-radio>
                  <el-radio label="2">本周</el-radio>
                  <el-radio label="3">上周</el-radio>
                  <el-radio label="4">本月</el-radio>
                  <el-radio label="5">上月</el-radio>
                  <el-radio label="6">半年</el-radio>
                </el-radio-group>
              </div>
              <div class="tabs_timer">
                <el-date-picker
                  @change="timerChange"
                  v-model="timerarr"
                  type="daterange"
                  size="mini"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="timestamp"
                >
                </el-date-picker>
              </div>
            </div>
            <el-tab-pane label="商品销量" name="1">
              <div class="tabsmain_box">
                <div class="tabs_left">
                  <div class="echart_box">
                    <div
                      ref="saleschart"
                      :style="{ width: '700px', height: '400px' }"
                    ></div>
                  </div>
                </div>
                <div class="tabs_right">
                  <rank-list title="商品排行榜" :list="admininfo.xl.data" />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="领取劵量" name="2">
              <div class="tabsmain_box">
                <div class="tabs_left">
                  <div class="echart_box">
                    <div
                      ref="getcouponchart"
                      :style="{ width: '700px', height: '400px' }"
                    ></div>
                  </div>
                </div>
                <div class="tabs_right">
                  <rank-list title="销量排行榜" :list="admininfo.ljl.data" />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
      <!-- 底部 -->
      <div class="footer_box">
        <el-card
          class="box-card"
          :body-style="{ padding: '10px' }"
          style="width:49%"
        >
          <div slot="header" class="clearfix">
            <div
              style="display:flex;justify-content:space-between;align-items:center;white-space:nowrap"
            >
              <span>线上热门搜索</span>
              <div class="proportion_radio">
                <div class="tabs_radio">
                  <el-radio-group
                    v-model="proportionradio"
                    size="small"
                    @change="proportionChange"
                  >
                    <el-radio label="1">今日</el-radio>
                    <el-radio label="2">本周</el-radio>
                    <el-radio label="3">上周</el-radio>
                    <el-radio label="4">本月</el-radio>
                    <el-radio label="5">上月</el-radio>
                    <el-radio label="6">半年</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </div>
          <div class="top_main">
            <div class="top_box">
              <div>搜索用户数</div>
              <p style="font-size:22px;font-weight: 600;">
                {{ admininfo.search.all_count }}
              </p>
            </div>
            <div class="main_box">
              <div
                ref="seachart"
                class="seachart"
                :style="{ width: '100%' }"
              ></div>
            </div>
            <el-divider></el-divider>
            <div class="bot_box">
              <!-- 热门搜索表格 -->
              <el-table :data="admininfo.search.data.data" style="width: 100%">
                <!-- :default-sort="{ prop: 'zzf', order: 'descending' }" -->
                <el-table-column type="index" label="排名" width="60">
                </el-table-column>
                <!-- <el-table-column prop="index" label="排名">
                  <template slot-scope="scope">
                    <div>{{ scope.row.id }}</div>
                  </template>
                </el-table-column> -->
                <el-table-column prop="search_name" label="搜索关键词">
                  <template slot-scope="scope">
                    <div>{{ scope.row.search_name }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="count" label="用户数" sortable>
                  <template slot-scope="scope">
                    <div>{{ scope.row.count }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="num" label="搜索次数" sortable>
                  <template slot-scope="scope">
                    <div>{{ scope.row.num }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="zzf" label="周涨幅" sortable>
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.zzf }}%
                      <i
                        v-if="scope.row.desc == '上升'"
                        class="el-icon-caret-bottom"
                        style="color:red"
                      ></i>
                      <i
                        v-else
                        class="el-icon-caret-top"
                        style="color:green"
                      ></i>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <div style="width:100%;text-align:right">
                <el-pagination
                  :page-size="5"
                  :pager-count="5"
                  layout="total,prev, pager, next"
                  @current-change="handleCurrentChange"
                  :total="admininfo.search.data.count"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </el-card>
        <el-card
          class="box-card"
          :body-style="{ padding: '0px' }"
          style="width:49%"
        >
          <div slot="header" class="clearfix">
            <div
              style="display:flex;justify-content:space-between;align-items:center;white-space:nowrap"
            >
              <span style="font-size:15px">分类占比</span>
              <div class="proportion_radio">
                <div class="tabs_radio">
                  <el-radio-group
                    v-model="classifyradio"
                    size="small"
                    @change="classifyChange"
                  >
                    <el-radio label="1">今日</el-radio>
                    <el-radio label="2">本周</el-radio>
                    <el-radio label="3">上周</el-radio>
                    <el-radio label="4">本月</el-radio>
                    <el-radio label="5">上月</el-radio>
                    <el-radio label="6">半年</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <el-radio-group v-model="rate" size="mini" @change="ratechange">
                <el-radio-button label="1">用户推广</el-radio-button>
                <el-radio-button label="2">商品销量</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div v-show="isuser" class="cake_box">
            <div
              style="margin: 0 auto;"
              ref="cakechart"
              :style="{ width: '500px', height: '500px' }"
            ></div>
          </div>
          <div v-show="isgoods" class="cake_box">
            <div
              style="margin: 0 auto;"
              ref="cakechart2"
              :style="{ width: '500px', height: '500px' }"
            ></div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAdminInfo,
  getCouponTimeNum,
  getCouponGroupInfo,
  goodsTimeGroup,
  goodsSalesVolume,
  getSearchNameList,
  getSearchList,
  getGoodsSalesVolume,
  getClassProportion
} from "@/api/mageback/mageback";
import RankList from "@/components/RankList.vue";
export default {
  name: "dashboard",
  components: {
    RankList
  },
  data() {
    return {
      classifyradio: "1",
      tabindex: "0",
      isuser: true,
      isgoods: false,
      timerarr: "",
      xltimerarr: "",
      ljtimerarr: "",
      radio: "1",
      xlradio: "1", //中间单选组
      ljradio: "1", //中间单选组
      xlstart_time: "", //中间单选组销量
      xlend_time: "", //中间单选组销量
      ljstart_time: "", //中间单选组领劵
      ljend_time: "", //中间单选组领卷
      proportionradio: "1", //分类
      rate: "1",
      activeName: "1",
      admininfo: {
        goods: {
          on_line: 0,
          beginWeek_num: {
            count: "0",
            field: "1" //上升
          },
          today_count: {
            count: "0",
            field: "2" //上升
          },
          all_count: 0
        },
        tg: {
          //当前推广商品数据
          tg_num: 0, //当前正在推广商品数
          group_num: [
            //最近30天每日商品推广数
            {
              time: "",
              num: ""
            }
          ],
          today_add_num: 0 //今天新增推广商品数
        },
        yjbd: {
          //佣金变动商品数据
          all_count: 0, // 佣金变动商品总数
          group_commission: [], // 最近30天每日佣金变动商品数（数据格式和上面的一样）
          today_commission_num: 0, //今日佣金变动商品数
          dl: 0 //佣金变动率
        },
        tg_user: {
          //推广用户数据
          all_num: 0, //总用户数
          sh_num: 0, //正在推广用户百分比
          bfb: 0 //今日新注册用户数
        },
        search: {
          //搜索商品数据
          all_count: 0, //搜索用户数
          search_user_num: 0, //每日搜索用户数
          data: {
            //搜索关键词数据
            page: 1,
            count: 0,
            max_page: 1,
            data: [
              // {
              //   id: 1,
              //   search_name: "test", // 关键词
              //   num: 1, //搜索次数
              //   count: 10, //搜索用户数
              //   bz_count: "10",
              //   sz_count: 1,
              //   create_at: "2020-05-19 10:17:53",
              //   desc: "上升", //上升或下降
              //   zzf: 9 //周涨幅
              // }
            ]
          }
        },
        goods_class: {
          // 商品分类 用户推广 数据
          data: [
            // {
            //   time: "2020-05-19",
            //   class_id: 10004,
            //   bl: "0.0150", // 占比
            //   class_name: "美妆" //分类名称
            // },
            // {
            //   time: "",
            //   class_id: 0,
            //   bl: "0",
            //   class_name: ""
            // }
          ],
          res: [
            // 商品分类 商品销量 数据
            // {
            //   time: "2020-05-19",
            //   class_id: 10004,
            //   bl: "0.0000", //占比
            //   class_name: "美妆" //分类
            // },
            // {
            //   time: "",
            //   class_id: 0,
            //   bl: "0",
            //   class_name: ""
            // }
          ]
        },
        xl: {
          //商品销量数据
          data: [
            // 商品销量 前十数据
            // {
            //   num: 10000, // 商品销量
            //   goods_short_title: "英语六级2020年6月备考资料全套", //商品标题
            //   tb_goods_id: "545191166474", //淘宝商品id
            //   g_id: 3 //商品表自增id
            // },
            // {
            //   num: 0,
            //   goods_short_title: "",
            //   tb_goods_id: "",
            //   g_id: 0
            // }
          ],
          count: [] // 商品销量 数据
        },
        ljl: {
          count: [], //商品 领券量 数据
          data: [
            // 商品 领券量  前十数据
            // {
            //   num: "0", //数量
            //   goods_short_title: "", //商品标题
            //   tb_goods_id: "" //淘宝商品id
            // },
            // {
            //   num: "0",
            //   goods_short_title: "",
            //   tb_goods_id: ""
            // }
          ]
        }
      },
      // goodsList: [
      //   {
      //     goods_short_title: "白鹭岛 " + 1 + " 号店",
      //     num: 1234.56 - 100
      //   }
      // ],
      //推广商品曲线图
      tgsetoption: {
        tooltip: {
          show: true
        },
        xAxis: {
          show: false,
          type: "category",
          // boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value",
          show: false
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
            areaStyle: {}
          }
        ]
      },
      //佣金变动柱状图
      yjbdsetoption: {
        tooltip: {
          show: true
        },
        xAxis: {
          show: false,
          type: "category",
          data: []
        },
        yAxis: {
          show: false,
          type: "value"
        },
        series: [
          {
            data: [],
            type: "bar"
          }
        ]
      },
      //商品销量排行榜柱状图
      salessetoption: {
        tooltip: {
          show: true
        },
        title: {
          text: "销售额排行榜"
        },
        xAxis: {
          // show: false,
          type: "category",
          data: []
        },
        yAxis: {
          // show: false,
          type: "value"
        },
        series: [
          {
            data: [],
            type: "bar"
          }
        ]
      },
      //领取劵量柱状图
      couponsetoption: {
        tooltip: {
          show: true
        },
        title: {
          text: "领取劵量"
        },
        xAxis: {
          // show: false,
          type: "category",
          data: []
        },
        yAxis: {
          // show: false,
          type: "value"
        },
        series: [
          {
            data: [],
            type: "bar"
          }
        ]
      },
      //热门搜索曲线图
      seasetoption: {
        tooltip: {
          show: true
        },
        xAxis: {
          show: false,
          type: "category",
          // boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value",
          show: false
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              formatter: "{b}"
            }
          }
        ]
      },
      //商品分类用户推广占比饼图
      cakesetoption: {
        // tooltip: {
        //   show: true
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: []
        },
        series: [
          {
            name: "用户推广",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // { value: 335, name: "直接访问" },
            ]
          }
        ]
      },
      //商品分类商品销量占比饼图
      cakesetoption2: {
        // tooltip: {
        //   show: true
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: []
        },
        series: [
          {
            name: "商品销量",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // { value: 335, name: "直接访问" },
            ]
          }
        ]
      }
    };
  },

  computed: {},
  created() {},
  mounted() {
    this.getAdminInfo();
  },
  methods: {
    // 分页切换
    handleCurrentChange(val) {
      this.getSearchNameList(val, 5);
      console.log(`当前页: ${val}`);
    },
    // 获取分类 用户推广饼图---
    getClassProportion(type) {
      getClassProportion({
        type: type
      })
        .then(res => {
          console.log("用户推广饼图", res);
          // 商品分类用户推广占比饼图;
          this.cakesetoption.legend.data = this.getArrayProps(
            res.data,
            "class_name"
          );
          console.log("00", this.cakesetoption.legend.data);
          let array = [];
          array = res.data.map(function(obj) {
            var rObj = {};
            rObj.name = obj.class_name;
            rObj.value = parseInt(obj.num);
            return rObj;
          });
          this.cakesetoption.series[0].data = array;
          console.log(this.cakesetoption);
          this.getCakechart();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取分类 商品销量饼图---
    getGoodsSalesVolume(type) {
      getGoodsSalesVolume({
        type: type
      })
        .then(res => {
          console.log(res);
          // 商品分类商品销量占比饼图
          this.cakesetoption2.legend.data = this.getArrayProps(
            res.data,
            "class_name"
          );
          let array2 = [];
          array2 = res.data.map(function(obj) {
            var rObj = {};
            rObj.name = obj.class_name;
            rObj.value = parseInt(obj.sales_volume);
            return rObj;
          });
          // console.log(array2);
          this.cakesetoption2.series[0].data = array2;
          this.getCakechart2();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取搜索数据曲线图---
    getSearchList(type) {
      getSearchList({
        type: type
      })
        .then(res => {
          console.log(res);
          // 热门搜索曲线图
          this.seasetoption.xAxis.data = this.getArrayProps(
            res.data.data,
            "time"
          );
          this.seasetoption.series[0].data = this.getArrayProps(
            res.data.data,
            "num"
          );
          this.getSeachart();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取搜索数据表格---
    getSearchNameList(page, pageSize) {
      getSearchNameList({
        page: page,
        pageSize: pageSize
      })
        .then(res => {
          console.log(res);
          this.admininfo.search.data.count = res.data.count;
          this.admininfo.search.data.data = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品销量排行---
    goodsSalesVolume(type, start_time, end_time) {
      goodsSalesVolume({
        type: type,
        start_time: start_time == "" ? undefined : start_time,
        end_time: end_time == "" ? undefined : end_time
      })
        .then(res => {
          console.log("商品销量排行", res);
          this.admininfo.xl.data = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 单位时间内 商品销量条形图---
    goodsTimeGroup(type, start_time, end_time) {
      goodsTimeGroup({
        type: type,
        start_time: start_time == "" ? undefined : start_time,
        end_time: end_time == "" ? undefined : end_time
      })
        .then(res => {
          console.log("商品销量条形图", res);
          // 商品销量排行榜柱状图
          this.salessetoption.xAxis.data = this.getArrayProps(
            res.data.count,
            "time"
          );
          this.salessetoption.series[0].data = this.getArrayProps(
            res.data.count,
            "num"
          );
          this.getSaleschart();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 领劵量排行前10---
    getCouponGroupInfo(type, start_time, end_time) {
      getCouponGroupInfo({
        type: type,
        start_time: start_time == "" ? undefined : start_time,
        end_time: end_time == "" ? undefined : end_time
      })
        .then(res => {
          console.log("领劵量排行", res);
          this.admininfo.ljl.data = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 单位时间内 领劵量条形图---
    getCouponTimeNum(type, start_time, end_time) {
      getCouponTimeNum({
        type: type,
        start_time: start_time == "" ? undefined : start_time,
        end_time: end_time == "" ? undefined : end_time
      })
        .then(res => {
          console.log(res);
          // 领取劵量柱状图
          this.couponsetoption.xAxis.data = this.getArrayProps(
            res.data.count,
            "time"
          );
          this.couponsetoption.series[0].data = this.getArrayProps(
            res.data.count,
            "num"
          );
          this.getCouponchart();
        })
        .catch(err => {
          console.log(err);
        });
    },
    ratechange(val) {
      console.log(val);
      if (val == 1) {
        this.isuser = true;
        this.isgoods = false;
      } else {
        this.isuser = false;
        this.isgoods = true;
      }
    },
    formatter(row) {
      // console.log(row, column);
      return row.address;
    },
    radioChange(radio) {
      console.log("单选", radio);
      if (this.tabindex == "0") {
        this.xlradio = radio;
        this.goodsSalesVolume(this.xlradio, this.xlstart_time, this.xlend_time);
        this.goodsTimeGroup(this.xlradio, this.xlstart_time, this.xlend_time);
      } else {
        this.ljradio = radio;
        this.getCouponGroupInfo(
          this.ljradio,
          this.ljstart_time,
          this.ljend_time
        );
        this.getCouponTimeNum(this.ljradio, this.ljstart_time, this.ljend_time);
      }
    },
    proportionChange(radio) {
      this.getSearchList(radio);
    },
    classifyChange(radio) {
      if (this.rate == "1") {
        this.getClassProportion(radio);
      } else {
        this.getGoodsSalesVolume(radio);
      }
    },
    timerChange(time) {
      console.log("时间区间", time);
      if (time !== null) {
        if (this.tabindex == "0") {
          this.xlstart_time = time[0].toString().substring(0, 10);
          this.xlend_time = time[1].toString().substring(0, 10);
          this.goodsSalesVolume(
            this.xlradio,
            this.xlstart_time,
            this.xlend_time
          );
          this.goodsTimeGroup(this.xlradio, this.xlstart_time, this.xlend_time);
        } else {
          this.ljstart_time = time[0].toString().substring(0, 10);
          this.ljend_time = time[1].toString().substring(0, 10);
          this.getCouponGroupInfo(
            this.ljradio,
            this.ljstart_time,
            this.ljend_time
          );
          this.getCouponTimeNum(
            this.ljradio,
            this.ljstart_time,
            this.ljend_time
          );
        }
      }
    },
    // 数组提取
    getArrayProps(array, key) {
      var resc = [];
      if (array) {
        array.forEach(function(t) {
          resc.push(t[key]);
        });
      }
      //使用: this.getArrayProps(array, "key");
      return resc;
    },
    // 获取控制台数据
    getAdminInfo() {
      getAdminInfo()
        .then(res => {
          // console.log(res);
          this.admininfo = res.data;
          console.log("控制台", this.admininfo);
          // 推广商品曲线图
          this.tgsetoption.xAxis.data = this.getArrayProps(
            this.admininfo.tg.group_num,
            "time"
          );
          this.tgsetoption.series[0].data = this.getArrayProps(
            this.admininfo.tg.group_num,
            "num"
          );
          // 佣金变动柱状图
          this.yjbdsetoption.xAxis.data = this.getArrayProps(
            this.admininfo.yjbd.group_commission,
            "time"
          );
          this.yjbdsetoption.series[0].data = this.getArrayProps(
            this.admininfo.yjbd.group_commission,
            "num"
          );
          // 商品销量排行榜柱状图
          this.salessetoption.xAxis.data = this.getArrayProps(
            this.admininfo.xl.count,
            "time"
          );
          this.salessetoption.series[0].data = this.getArrayProps(
            this.admininfo.xl.count,
            "num"
          );
          // 领取劵量柱状图
          this.couponsetoption.xAxis.data = this.getArrayProps(
            this.admininfo.ljl.count,
            "time"
          );
          this.couponsetoption.series[0].data = this.getArrayProps(
            this.admininfo.ljl.count,
            "num"
          );
          // 热门搜索曲线图
          this.seasetoption.xAxis.data = this.getArrayProps(
            this.admininfo.search.search_user_num,
            "time"
          );
          this.seasetoption.series[0].data = this.getArrayProps(
            this.admininfo.search.search_user_num,
            "num"
          );
          // 商品分类用户推广占比饼图;
          this.cakesetoption.legend.data = this.getArrayProps(
            this.admininfo.goods_class.data,
            "class_name"
          );
          // console.log("00", this.cakesetoption.legend.data);
          let array = [];
          array = this.admininfo.goods_class.data.map(function(obj) {
            var rObj = {};
            rObj.name = obj.class_name;
            rObj.value = parseInt(obj.bl);
            return rObj;
          });
          // console.log(array);
          this.cakesetoption.series[0].data = array;
          // 商品分类商品销量占比饼图
          this.cakesetoption2.legend.data = this.getArrayProps(
            this.admininfo.goods_class.res,
            "class_name"
          );
          let array2 = [];
          array2 = this.admininfo.goods_class.res.map(function(obj) {
            var rObj = {};
            rObj.name = obj.class_name;
            rObj.value = parseInt(obj.sales_volume);
            return rObj;
          });
          // console.log(array2);
          this.cakesetoption2.series[0].data = array2;

          // 实例化图表
          this.getTgchart();
          this.getYjbdchart();
          this.getSaleschart();
          this.getCouponchart();
          this.getSeachart();
          this.getCakechart();
          this.getCakechart2();
        })
        .catch(err => {
          console.log(err);
        });
    },
    //推广商品曲线图
    getTgchart() {
      // 基于准备好的dom，初始化echarts实例
      let tgchart = this.$echarts.init(this.$refs.tgchart);
      // 绘制图表
      tgchart.showLoading();
      tgchart.setOption(this.tgsetoption);
      tgchart.hideLoading();
    },
    // 佣金变动柱状图
    getYjbdchart() {
      // 基于准备好的dom，初始化echarts实例
      let yjbdchart = this.$echarts.init(this.$refs.yjbdchart);
      // 绘制图表
      yjbdchart.setOption(this.yjbdsetoption);
    },
    // 商品销量
    getSaleschart() {
      // 基于准备好的dom，初始化echarts实例
      let saleschart = this.$echarts.init(this.$refs.saleschart);
      // 绘制图表
      saleschart.setOption(this.salessetoption);
    },
    // 领取劵量
    getCouponchart() {
      // 基于准备好的dom，初始化echarts实例
      let getcouponchart = this.$echarts.init(this.$refs.getcouponchart);
      // 绘制图表
      getcouponchart.setOption(this.couponsetoption);
    },
    // 热门搜索
    getSeachart() {
      // 基于准备好的dom，初始化echarts实例
      let seachart = this.$echarts.init(this.$refs.seachart);
      // 绘制图表
      seachart.setOption(this.seasetoption);
    },
    // 分类用户推广饼图
    getCakechart() {
      // 基于准备好的dom，初始化echarts实例
      let cakechart = this.$echarts.init(this.$refs.cakechart);
      // 绘制图表
      cakechart.setOption(this.cakesetoption);
    },
    // 分类商品销量饼图
    getCakechart2() {
      // 基于准备好的dom，初始化echarts实例
      let cakechart2 = this.$echarts.init(this.$refs.cakechart2);
      // 绘制图表
      cakechart2.setOption(this.cakesetoption2);
    },
    handleClick(tab) {
      this.tabindex = tab.index;
      console.log(this.tabindex);
      if (this.tabindex == "0") {
        if (this.xlstart_time !== "") {
          this.radio = this.xlradio;
          this.timerarr = [];
          let aray = [];
          aray.push(parseInt(this.xlstart_time + "000"));
          aray.push(parseInt(this.xlend_time + "000"));
          this.timerarr = aray;
          console.log(aray);
        } else {
          this.radio = this.xlradio;
          this.timerarr = [];
        }
      } else {
        if (this.ljstart_time !== "") {
          this.radio = this.ljradio;
          this.timerarr = [];
          let aray = [];
          aray.push(parseInt(this.ljstart_time + "000"));
          aray.push(parseInt(this.ljend_time + "000"));
          this.timerarr = aray;
          console.log(aray);
        } else {
          this.radio = this.ljradio;
          this.timerarr = [];
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.dashboard {
  width: 100%;

  .dashboard_main {
    width: 100%;
    .topcard {
      width: 100%;
      .top_main::v-deep {
        text-align: left;
        .top_box {
          p {
            margin-top: 10px;
            font-size: 36px;
            font-weight: bold;
            margin-left: 5px;
          }
        }
        .main_box {
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .tgchart {
            height: 70px;
            canvas {
              height: 50px;
            }
          }
        }
        .el-divider--horizontal {
          margin: 5px 0;
        }
        .progress_box {
          .el-progress-bar {
            margin-top: 20px;
          }
        }
      }
    }
    .botcard {
      width: 100%;
      margin-top: 20px;
      .tabs_box::v-deep {
        position: relative;
        .el-tabs__content {
          overflow: inherit;
        }
        .tabs_position {
          position: absolute;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          top: -53px;
          right: 0;
          z-index: 100;
          .tabs_radio {
            margin-right: 10px;
            .el-radio {
              margin-right: 0;
            }
            .el-radio__inner {
              display: none !important;
            }
          }
          .tabs_timer {
            .el-date-editor {
              width: 210px;
            }
          }
        }
        .tabsmain_box {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .tabs_left {
            width: 100%;
          }
          .tabs_right {
            width: 288px;
          }
        }
      }
    }
    .footer_box {
      text-align: left;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .top_main {
        width: 100%;
        height: 485px;
        .main_box {
          .seachart {
            height: 70px;
            canvas {
              height: 50px;
            }
          }
        }
      }
      .proportion_radio::v-deep {
        .el-radio__inner {
          display: none;
        }
        .el-radio {
          margin-right: 0;
        }
      }
      .cake_box {
        width: 100%;
      }
    }
  }
}
</style>
